<template>
    <el-row class="tl">
        <el-col class="btn">
            <el-dialog :visible.sync="dialogVisible" width="625px" @close="closeAddChapter()">
                <div slot="title" class="dialog-title box box-align-center">
                    <i class="title-icon"></i>
                    <span class="title-text ml10">{{title}}</span>
                </div>
                <el-transfer v-model="value" :data="data" :titles="titles" filterable class="tan">
                    <span slot-scope="{ option }" class="list box box-align-center">
                        <el-avatar :size="size" :src="option.icon" class="mr10"></el-avatar>
                        <h3>{{ option.label }}</h3>
                    </span>
                </el-transfer>
                <span slot="footer" class="dialog-footer btn">
                    <el-button class="reset-cancel-btn" @click="closeAddChapter()">取 消</el-button>
                    <el-button class="reset-comfirm-btn" @click="onSubmit()">保 存</el-button>
                </span>
            </el-dialog>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        props: {
            dialogVisible: {
                default: false
            },
            title: {
                default: '添加评分小组'
            },
            classid:{
                type:Number
            }
        },
        data() {
            return {
                size: 34,
                data:[],
                value: [],
                titles: ['学生列表', '评分小组']
            }
        },
        methods: {
            egStuList() {
                let params = {
                    classid:this.classid
                };
                this.$api.tr.egStuList(params).then(res => {
                    if (res.code == '0') {
                        this.data = res.stuList;
                        this.value = res.egIds;
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            closeAddChapter() {
                this.$emit('clickClose')
            },
            onSubmit() {
                let params = {
                    classid:this.classid,
                    userIds:this.value
                };
                this.$api.tr.savePfxz({"str":JSON.stringify(params)}).then(res => {
                    if (res.code == '0') {
                        this.$message.success('操作成功！');
                        this.$emit('update')
                        this.closeAddChapter()
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .list {}

    .tan>>>.el-transfer-panel__item.el-checkbox {
        height: 34px;
        margin-bottom: 18px;
    }

    .tan>>>.el-button--primary.is-disabled,
    .el-button--primary.is-disabled:active,
    .el-button--primary.is-disabled:focus,
    .el-button--primary.is-disabled:hover {
        background-color: #A6BEFC;
        border-color: #A6BEFC;
    }

    .tan>>>.el-button--primary {
        background-color: #626BF1;
        border-color: #626BF1;
    }

    .tan>>>.el-checkbox__input.is-checked+.el-checkbox__label {
        color: #000;
    }

    .tan>>>.el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #626BF1;
        border-color: #626BF1;
    }

    .tan>>>.el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #626BF1;
        border-color: #626BF1;
    }
    .tan>>>.el-transfer-panel__item:hover {
        color: #000;
    }
    .tan>>>.el-checkbox__inner:hover {
        border-color: #626BF1;
    }
    .tan>>>.el-checkbox__input.is-focus .el-checkbox__inner{
        border-color: #626BF1;
    }
</style>
